<template>
  <FrontSideTable
    dataUrl="/param/diseaseParam/getList"
    addUrl="/param/diseaseParam/add"
    editUrl="/param/diseaseParam/edit"
    deleteUrl="/param/diseaseParam/delete"
    tableTitle="病害描述参数列表"
    :columns="columns"
    searchHint="根据参数名、参数类型或属性名查找"
    :searchProps="searchProps"
    :form="form"
    :rules="rules"
    @beforeAdd="handleAdd"
    @beforeEdit="handleEdit"
    @onCreated="handleCreated">

    <template slot="afterColumns">
      <!--筛选列，使用filterChange监听事件代替filterMethod方法-->
      <el-table-column align="center"
                       prop="dataTypeName"
                       column-key="dataTypeId"
                       label="数据类型"
                       :filters="dataTypeFilters"
                       filter-placement="bottom">
      </el-table-column>
    </template>

    <template slot="form">
      <el-form-item label="参数名称" prop="name">
        <el-input v-model="form.name" placeholder="输入参数名称"></el-input>
      </el-form-item>
      <el-form-item label="属性名" prop="field">
        <el-input v-model="form.field" placeholder="输入属性名"></el-input>
      </el-form-item>
      <el-form-item label="数据类型" prop="dataTypeId">
        <el-select v-model="form.dataTypeId" style="width: 100%;" placeholder="请选择数据类型" filterable>
          <el-option v-for="item of dataTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="顺序号" prop="sortNo">
        <el-input type="number" v-model.number="form.sortNo" placeholder="请输入顺序号"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="form.notes"></el-input>
      </el-form-item>
    </template>

  </FrontSideTable>
</template>

<script>
  import FrontSideTable from "../../template/FrontSideTable.vue"
  import {intValidator} from "../../../assets/js/utils/ValidateUtils"
  import {doGet} from "../../../assets/js/utils/RequestUtils"
  import {clearFields} from "../../../assets/js/utils/ObjectUtils"

  //用于重复校验
  let oldName = "",
    oldField = "";

  //获取数据类型数据
  const DATA_TYPE_URL = "/param/diseaseParam/getDataTypeList";

  export default {
    name:"DiseaseParamMaintenance",
    data() {
      //名称校验
      let nameValidator = (rule, value, callback)=>{
        if(oldName === value) {
          callback();
        } else if(this.dataList.some(item=>item.name === value)) {
          callback(new Error("参数名重复"));
        } else {
          callback();
        }
      };

      //属性重复校验
      let fieldValidator = (rule, value, callback)=>{
        if(oldField === value) {
          callback();
        } else if(this.dataList.some(item=>item.field === value)) {
          callback(new Error("属性名重复"));
        } else {
          callback();
        }
      };

      return {
        dataList:[],
        dataTypeList:[],
        columns:[
          {prop:"sortNo", label:"顺序号", width:"100", sortable:"custom"},
          {prop:"name", label:"参数名"},
          {prop:"field", label:"属性名"}
        ],
        searchProps:["name", "field", "dataTypeName"],
        form:{
          name:"",
          dataTypeId:"",
          field:"",
          sortNo:0,
          notes:""
        },
        rules:{
          name:[
            {required:true, message:"请输入参数名", trigger:"blur"},
            {validator:nameValidator, trigger:"blur"}
          ],
          field:[
            {required:true, message:"请输入属性名", trigger:"blur"},
            {validator:fieldValidator, trigger:"blur"}
          ],
          dataTypeId:[
            {required:true, message:"请选择数据类型", trigger:"blur"}
          ],
          sortNo:[
            {validator:intValidator, trigger:"blur"}
          ]
        }
      }
    },
    computed: {
      dataTypeFilters() {
       return this.dataTypeList.map(dataType=>{
           return {text:dataType.name, value:dataType.id};
       });
      }
    },
    methods:{
      handleCreated(data) {
        this.dataList = data;
      },
      handleAdd() {
        oldName = "";
        oldField = "";
        clearFields(this.form);
      },
      handleEdit(data) {
        oldName = data.name;
        oldField = data.field;
        this.form = {...data};
      },
      fetchData() {
        doGet(DATA_TYPE_URL, {component:this}).then(response=>this.dataTypeList = response);
      }
    },
    activated() {
      this.fetchData();
    },
    components:{FrontSideTable}
  }
</script>



// WEBPACK FOOTER //
// DiseaseParamMaintenance.vue?188649b9